<template>
    <div id="app">
        <hr style="border: none"/>
            <search-bar v-on:collegeCallBack="searchCollege" v-on:yearCallBack="searchYear" v-on:msgCallBack="searchEcharts" v-on:loadEcharts="drawEcharts"></search-bar>
            <div align="center">
                <span
                style="font-family: 微软雅黑; font-size: 20px;">
                潍坊学院{{collegeName}}{{queryForm.data.year}}年度</span>
                <br>
                <span style="font-size: 18px;">教职工基本情况分析</span>
                <hr>
            </div>
            <div style="height:1600px">
                <el-row :gutter="10" class="teacherRow">
                    <el-col :span="12">
                        <el-card :body-style="{ padding: '0px',height: '80%' }">
                          <div slot="header" class="clearfix">
                              <span>职称分析</span>
                          </div>
                          <level-echart class="echarts" v-bind:college="this.queryForm.data.collegeCode" v-bind:year="this.queryForm.data.year" ref="levelsearch"></level-echart>
                        </el-card>                        
                    </el-col>
                    <el-col :span="12">
                       
                        <el-card :body-style="{ padding: '0px',height: '80%' }">
                          <div slot="header" class="clearfix">
                              <span>学历分析</span>
                          </div>
                           <edu-echart class="echarts" v-bind:college="this.queryForm.data.collegeCode" v-bind:year="this.queryForm.data.year" ref="edusearch"></edu-echart>
                        </el-card>   
                       
                    </el-col>
                </el-row>
                
                <el-row :gutter="10"  class="teacherRow">
                    <el-col :span="12">
                       
                        <el-card :body-style="{ padding: '0px',height: '80%' }">
                          <div slot="header" class="clearfix">
                              <span>政治面貌分析</span>
                          </div>
                           <political-echart class="echarts" v-bind:college="this.queryForm.data.collegeCode" v-bind:year="this.queryForm.data.year" ref="politicalsearch"></political-echart>
                        </el-card>              
                    </el-col>
                    <el-col :span="12">
                       
                        <el-card :body-style="{ padding: '0px',height: '80%' }">
                          <div slot="header" class="clearfix">
                              <span>性别分析</span>
                          </div>
                          <gender-echart class="echarts" v-bind:college="this.queryForm.data.collegeCode" v-bind:year="this.queryForm.data.year" ref="gendersearch"></gender-echart>
                        </el-card>     
                    </el-col>
                </el-row>
                <el-row :gutter="10"  class="teacherRow">
                    <el-col :span="12">
                        
                        <el-card :body-style="{ padding: '0px',height: '80%' }">
                          <div slot="header" class="clearfix">
                              <span>年龄分析</span>
                          </div>
                          <age-echart class="echarts" v-bind:college="this.queryForm.data.collegeCode" v-bind:year="this.queryForm.data.year" ref="agesearch"></age-echart>
                        </el-card>    
                    </el-col>
                    <el-col :span="12">
                        
                        <el-card :body-style="{ padding: '0px',height: '80%' }">
                          <div slot="header" class="clearfix">
                              <span>民族分析</span>
                          </div>
                          <nation-echart class="echarts" v-bind:college="this.queryForm.data.collegeCode" v-bind:year="this.queryForm.data.year" ref="nationsearch"></nation-echart>
                        </el-card>    
                    </el-col>
                </el-row>
            </div>
        </div>
</template>
<script>
import searchBar from "./searchBar";
import levelEchart from "./levelEchart";
import eduEchart from "./eduEchart";
import politicalEchart from "./politicalEchart";
import genderEchart from "./genderEchart";
import ageEchart from "./ageEchart";
import nationEchart from "./nationEchart";
export default {
  name: "teachstuff",
  components: {
    searchBar,
    levelEchart,
    eduEchart,
    politicalEchart,
    genderEchart,
    ageEchart,
    nationEchart
  },
  data() {
    return {
      queryForm: {
        dialogFormVisible: false, //不允许弹出对话框
        data: {
          //学院
          collegeCode: "",
          //年份
          year: ""
        }
      },
      collegeName:""
    };
  },
  methods: {
    drawEcharts: function() {
      this.$refs.levelsearch.drawLevelEcharts();
      this.$refs.edusearch.drawEduEcharts();
      this.$refs.politicalsearch.drawPoliticalEcharts();
      this.$refs.gendersearch.drawGenderEcharts();
      this.$refs.agesearch.drawAgeEcharts();
      this.$refs.nationsearch.drawNationEcharts();
    },
    searchEcharts: function(collegeCode, year) {
      this.queryForm.data.collegeCode = collegeCode;
      this.queryForm.data.year = year;
      console.log(collegeCode);
      console.log(year);
      console.log(this.queryForm.data.collegeCode);
      console.log(this.queryForm.data.year);
    },
    searchCollege: function(college) {
      this.collegeName = college.text;
    },
    searchYear:function(year){
      this.queryForm.data.year = year;
    }
  },
  mouted: function() {
    //初始化操作
    // this.drawEcharts();
  }
};
</script>
<style>
.teacherRow {
  width: 100%;
  height: 33%;
  margin-bottom: 10px;
}

.el-col {
  height: 100%;
}

.echarts {
  width: 100%;
  height: 100%;
}
.el-card {
  height: 100%;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>
